<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>好稿投票</span>
        </div>
      </template>
      <div>
        
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import workApi from '../../api/work'
import userApi from '../../api/user'
const personData = ref([])
const originalData = ref([])

onMounted(async () => {
  getPersonList()
})

// 获取数据列表
const getPersonList = async () => {
  const res = await workApi.getPersonList()
  originalData.value = res.data
  //把res.data中的member做处理
  const membersData = {}

  res.data.forEach((item) => {
    // 将成员字符串拆分为数组
    const members = item.member.split(',').map((member) => member.trim())

    // 遍历成员数组，创建新的对象
    members.forEach((member) => {
      if (!membersData[member]) {
        membersData[member] = []
      }

      // 将项目信息加入成员对应的数组
      membersData[member].push({
        id: item.id,
        product_name: item.product_name,
        department_name: item.department_name,
        work_date: item.work_date,
        progress: parseInt(item.progress),
        other_member: item.member,
      })
    })
  })

  const res1 = await userApi.getUserList() //获取所有用户列表
  const allPerson = res1.data

  // 遍历所有人员数组，为不在 membersData 中的人员生成空数组
  allPerson.forEach((person) => {
    const name = person.name

    if (!membersData[name] && parseInt(person.role) < 9) {
      membersData[name] = [] 
    }
  })

  personData.value = Object.keys(membersData).map((member) => ({
    member,
    projects: membersData[member],
    type: membersData[member].type,
  }))

  console.log(personData.value)
}

const getOtherMembers = (id,name) =>{
  const memberList = originalData.value.find(item => item.id === id).member.split(",");
  const otherMembers = memberList.filter(member => member !== name);
  return otherMembers;
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-single-lane-body {
  background-color: #f7f7f7;
  height: 100%;
  min-width: 100%;
  padding: 2px 0;
  overflow: auto;
}

.kanban-single-lane-body-wrapper {
  align-items: flex-start;
  border-radius: 4px;
  display: flex;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.kanban-single-list {
  flex-shrink: 0;
  height: 100%;
  padding: 4px 0;
}

.kanban-single-list-contents {
  background-color: #f7f7f7;
  border-radius: 4px;
  height: 100%;
}

.kanban-head {
  padding: 10px 25px;
  font-weight: bold;
}

.kanban-bucket {
  width: 222px;
  height: calc(100% - 48px);
  min-height: 96px;
  padding: 0 17px;
}

.kanban-progress {
  background: #86a5ff;
  position: absolute;
  height: 2%;
  bottom: 0;
  left: 0;
  border-radius: 10px 0 0 10px;
}

.kanban-progress-text {
  font-size: 12px;
  position: absolute;
  top: -8px;
  right: -30px;
  color: rgb(190 190 191);
}

.kanban-dnd-card {
  margin-bottom: 20px;
  outline: none;
  width: 193px;
  background-color: #fff;
  padding: 20px 10px 20px 10px;
  text-align: left;
  border-radius: 10px;
  position: relative;
}

.task-main {
  /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); */
  position: relative;
  white-space: normal;
  width: 100%;
}

.task-other {
  /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); */
  position: relative;
  white-space: normal;
  font-size: 14px;
  margin-top: 10px;
  color: #8c8c8c;
}

.box-card {
  width: 100%;
  height: 100%;
}

.more {
  width: 20px;
  height: 20px;
  background: #fff;
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-align: center;
  cursor: pointer;
}

.more .el-icon {
  color: gray;
}
</style>
